<div ng-controller="KeyValuesController" class="labels">
    <div class="form-inline labels-edit" ng-show="editable">
      <ng-form class="edit-label" name="form" novalidate>


        <div row cross-axis="start">
          <div
            flex grow="5" shrink="5"
            class='form-group'
            ng-class="{'has-error': form.key.$error.oscKeyValid}"
            style="margin-right: 10px;">
            <input
              class="form-control"
              type="text"
              name="key"
              ng-attr-placeholder="{{keyTitle}}"
              ng-model="key"
              ng-model-options="{ debounce: 200 }"
              autocorrect="off"
              autocapitalize="off"
              spellcheck="false"
              osc-input-validator="key"
              osc-unique="entries">
          </div>

          <div
            flex grow="5" shrink="5"
            class="form-group"
            ng-class="{'has-error': form.value.$error.oscValueValid}"
            style="margin-right: 10px;">
            <input
              class="form-control"
              type="text"
              name="value"
              ng-attr-placeholder="{{valueTitle}}"
              ng-model="value"
              autocorrect="off"
              autocapitalize="off"
              spellcheck="false"
              osc-input-validator="value">
          </div>
          <button
            class="btn btn-default"
            ng-click="addEntry()"
            ng-disabled="form.$invalid || !key || !value">Add</button>
        </div>


        <div row class="has-error" ng-show="form.key.$error.oscUnique">
          <span class="help-block">
            Duplicate {{(keyTitle || 'key') | lowercase}}: {{key}}
          </span>
        </div>


        <div row class="has-error" ng-show="form.key.$error.oscKeyValid">
          <span class="help-block">Please enter a valid {{setErrorText(keyValidator)}}
            <span class="help action-inline" ng-if="keyValidationTooltip">
              <a href="" data-toggle="tooltip" data-placement="bottom"
                data-original-title="{{keyValidationTooltip}}">
                <i class="pficon pficon-help"></i>
              </a>
            </span>
          </span>
        </div>



        <div row class="has-error" ng-show="form.value.$error.oscValueValid">
          <span class="help-block">Please enter a valid value
            <span class="help action-inline" ng-if="keyValidationTooltip">
              <a href="" data-toggle="tooltip" data-placement="bottom"
                data-original-title="{{valueValidationTooltip}}">
                <i class="pficon pficon-help"></i>
              </a>
            </span>
          </span>
        </div>

      </ng-form>

      <div class="gutter-top">
        <!-- predefined keys -->
        <div ng-repeat="(key,value) in entries | valuesIn:readonlyKeys">
          <div row cross-axis="start">
            <div
              flex grow="5" shrink="5"
              class="truncate">{{key}}</div>
            <div
              flex grow="5" shrink="5"
              style="margin-left: 10px;"
              class="truncate">{{value}}</div>
            <div
              main-axis="end" cross-axis="baseline"
              style="flex-basis: 50px; max-width: 50px;">
              &nbsp;
            </div>
          </div>
        </div>

        <!-- user defined keys -->
        <div ng-repeat="(key,value) in entries | valuesNotIn:readonlyKeys">
          <div
            row cross-axis="start"
            ng-controller="KeyValuesEntryController">

            <!-- view, edit/delete -->
            <div
              flex grow="5" shrink="5"
              class="truncate"
              ng-attr-title="{{key}}">{{key}}</div>

            <div
              flex grow="5" shrink="5"
              class="truncate"
              ng-hide="editing"
              ng-attr-title="{{value}}"
              style="margin-left: 10px;">
              {{value}}
            </div>

            <div
              row
              main-axis="end"
              cross-axis="baseline"
              ng-hide="editing"
              style="flex-basis: 50px;">
              <a
                href=""
                ng-click="edit()"
                class="btn btn-default btn-xs"
                title="Edit">
                <i class="icon icon-pencil"></i>
              </a>
              <a
                href=""
                ng-click="deleteEntry(key)"
                class="btn btn-default btn-xs"
                title="Delete"
                ng-if="allowDelete(key)">
                <i class="fa fa-times"></i>
              </a>
            </div>

            <!-- editing view, save/cancel -->
            <div
              row cross-axis="start" flex grow="5" shrink="5"
              ng-show="editing">
              <input
                class="form-control"
                type="text"
                ng-value="{{value}}"
                ng-model="value"
                autocorrect="off"
                autocapitalize="off"
                spellcheck="false"
                style="margin-left: 6px;">
            </div>

            <div
              row main-axis="end" cross-axis="baseline"
              ng-show="editing"
              style="flex-basis: 50px;">
              <div>
                <a
                  href=""
                  ng-click="update(key, value, $parent.entries)"
                  class="btn btn-default btn-xs"
                  title="Submit">
                  <i class="icon icon-ok"></i>
                </a>
              </div>
              <a
                href=""
                ng-click="cancel()"
                class="btn btn-default btn-xs"
                title="Cancel">
                <i class="icon icon-remove"></i>
              </a>
            </div>

          </div>
        </div>


      </div>
    </div>
    <div ng-hide="editable">
      <div ng-if="(entries | hashSize) === 0"><strong>None</strong></div>
      <ul ng-if="(entries | hashSize) !== 0" class="labels-readonly label-list list-unstyled">
        <li ng-repeat="(key,value) in entries">
          <span class="key truncate" ng-attr-title="{{key}}">{{key}}</span>
          <span class="value truncate" ng-attr-title="{{value}}">{{ value }}</span>
        </li>
      </ul>
    </div>
</div>
